import { type Ref, ref, computed, h, Fragment } from "vue";
import type { PlusColumn, FieldValues, OptionsRow } from "plus-pro-components";
import { ElUpload, ElButton, ElSelect, ElOption } from "element-plus";
import { getToken, formatToken } from "@/utils/auth";
import { message } from "@/utils/message";
import { getLeaders, usersList, organizationsList } from "@/api/zhaoyuan";
const { token } = getToken();
export function useForm(pageEnums: Ref<{ [key: string]: OptionsRow[] }>) {
  const formRules = {
    name: [
      {
        required: true,
        message: "请输入名称"
      }
    ],
    position: [
      {
        required: true,
        message: "请选择职务"
      }
    ],
    leaderableType: [
      {
        required: true,
        message: "请选择岗位"
      }
    ],
    leaderableId: [
      {
        required: true,
        message: "请选择组织"
      }
    ],
    userId: [
      {
        required: true,
        message: "请绑定用户"
      }
    ]
  };
  const formColumns: PlusColumn[] = [
    {
      label: "姓名",
      prop: "name"
    },
    {
      label: "职务",
      prop: "position",
      valueType: "select",
      options: computed(() => pageEnums.value.leadershipPositionTypeList)
    },
    {
      label: "岗位",
      prop: "leaderableType",
      valueType: "select",
      options: computed(() => pageEnums.value.leadershipPositionTypeList)
    },
    {
      label: "组织",
      prop: "leaderableId",

      renderField(value, onChange) {
        return h(
          ElSelect,
          {
            modelValue: value,
            "onUpdate:modelValue": value1 => {
              onChange(value1);
            },
            filterable: true,
            remote: true,
            "remote-show-suffix": true,
            "reserve-keyword": true,
            placeholder: "请输入关键字进行搜索组织",
            remoteMethod: searchOList,
            loading: oLoading.value
          },
          oList.value.map(item =>
            h(ElOption, {
              key: item.id,
              label: item.label,
              value: item.id
            })
          )
        );
      }
    },
    {
      label: "用户",
      prop: "userId",
      renderField(value, onChange) {
        return h(
          ElSelect,
          {
            modelValue: value,
            "onUpdate:modelValue": value1 => {
              onChange(value1);
            },
            filterable: true,
            remote: true,
            "remote-show-suffix": true,
            "reserve-keyword": true,
            placeholder: "请输入关键字进行搜索用户",
            remoteMethod: searchUList,
            loading: oLoading.value
          },
          uList.value.map(item =>
            h(ElOption, {
              key: item.id,
              label: item.label,
              value: item.id
            })
          )
        );
      }
    }
  ];
  const uList = ref([]);
  const uLoading = ref(false);

  const oList = ref([]);
  const oLoading = ref(false);
  //搜索组织
  const searchOList = (query: string) => {
    if (query) {
      if (oLoading.value === true) return;
      oLoading.value = true;
      organizationsList({ q: query }, "QUERY").then(res => {
        oLoading.value = false;
        const list = res?._embedded?.items || [];
        oList.value = list;
      });
    } else {
      oList.value = [];
    }
  };
  //搜索组织
  const searchUList = (query: string) => {
    if (query) {
      if (uLoading.value === true) return;
      uLoading.value = true;
      usersList({ q: query }, "QUERY").then(res => {
        uLoading.value = false;
        const list = res?._embedded?.items || [];
        uList.value = list;
      });
    } else {
      uList.value = [];
    }
  };

  const formTitle = ref("");
  const formId = ref<number>(0);
  const formVisible = ref(false);
  const formValues = ref<FieldValues>({});
  const formOpen = async (title = "新增", row: any = {}) => {
    //重置表单
    if (title == "修改") {
      formId.value = row.id;
      const res = await getLeaders(row.id);
      formValues.value = res;
    } else {
      formId.value = 0;
      formValues.value = {};
    }
    formTitle.value = title;
    formVisible.value = true;
  };

  return {
    formRules,
    formColumns,
    formVisible,
    formValues,
    formOpen,
    formTitle,
    formId
  };
}
